<template>
    <div class="manage">
        <el-dialog :title="typeSave.zh" :visible.sync="isShow" >
            <form-components :formLabel="formLabelSave" :form="operateForm" ref="form" :config="formConfig"></form-components>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="typeSave.zh" :visible.sync="infoIsShow" width="80%" >
            <admin-info></admin-info>
        </el-dialog>
        <div class="manage-header-primary">
            <form-components inline :formLabel="searchLabel" :form="searchFrom" :config="config">
                <el-button type="primary" @click="adminList">搜索</el-button>
            </form-components>
        </div>
        <div class="manage-header">
            <el-button type="primary" @click="addAdmin">添加</el-button>
        </div>
        <table-components :tableData="adminData" :tableLabel="adminLabel" :config="config" @currentChange="adminList" @sizeChange="adminList" @edit="editAdmin" @del="delAdmin" @info="infoAdmin"></table-components>
    </div>
</template>

<script>
   import TableComponents from "../../components/TableComponents";
   import FormComponents from "../../components/FormComponents";
   import AdminInfo from "./AdminInfo";

    export default {
        components: {TableComponents, FormComponents, AdminInfo},
        created() {
            this.enableStatusZh = this.$store.state.statusZh.enable;
            this.adminList();
        },
        data() {
            return {
                adminData: [],
                config: {page: 1, total: 0, size: 20, loading: false, editHandle: true},
                formConfig: {loading: false},
                adminLabel: [
                    {prop: 'name', label: '姓名'},
                    {prop: 'loginIp', label: '登录IP'},
                    {prop: 'nameAdminRole', label: '角色'},
                    {prop: 'enableZh', label: '启用'},
                    {prop: 'addTime', label: '添加时间'},
                ],
                formLabelSave: [],
                operateForm: {},
                isShow: false,
                infoIsShow: false,
                typeSave: {},
                enableStatusZh: {},
                searchLabel: [
                    {model: 'name', label: '姓名'}
                ],
                searchFrom: {name: ''},

            }
        },
        methods: {
            adminList() {

                this.config.loading = true;

                let data = Object.assign(
                    {offset: this.config.page, length: this.config.size},
                    this.searchFrom
                );

                this.$http.post('adminList', data).then(
                    response => {
                        if (response.code === 20000) {
                            let data = response.data;

                            this.config.total = data.count;

                            this.adminData = data.list.map(v => {

                                v.enableZh = this.enableStatusZh.style[v.enable];
                                v.addTime = this.$dateTime.timeToDate(v.addTime);

                                if (v.roleId === 0) {
                                    v.nameAdminRole = '超级管理员';
                                } else {
                                    v.nameAdminRole = v.adminRoleHasOne ? v.adminRoleHasOne.name : '';
                                }

                                return v;
                            });
                        }
                    }
                );

                this.config.loading = false;
            },
            cancel() {
                this.isShow = false;
            },
            operateFormMethods() {
                this.$http.post('roleAll').then(
                    response => {
                        if (response.code === 20000) {

                            let roleAllData = {0: '超级管理员'};

                            response.data.roleAll.forEach(function (v) {
                                roleAllData[v.id] = v.name
                            });

                            this.formLabelSave = [
                                {model: 'password', label: '密码'},
                                {model: 'password2', label: '确认密码'},
                                {model: 'enable', label: '启用', type: 'select', opts: this.enableStatusZh.default},
                                {model: 'roleId', label: '角色', type: 'select', opts: roleAllData},
                            ];

                            if (this.typeSave.en === 'addAdmin') this.formLabelSave.unshift({model: 'name', label: '姓名'});
                        }
                    });
                return true;
            },
            addAdmin() {
                this.typeSave = {'en': 'addAdmin', 'zh': '添加管理员'};
                this.operateFormMethods();
                this.operateForm = {name: '', password: '', password2: '', enable: '2', roleId: '0'}
                this.isShow = true;
            },
            infoAdmin() {
                this.typeSave = {'en': 'infoAdmin', 'zh': '详情管理员'};
                this.infoIsShow = true;
            },
            editAdmin(row) {
                this.typeSave = {'en': 'editAdmin', 'zh': '编辑管理员'};
                this.operateFormMethods();
                this.operateForm = {
                    id       : row.id,
                    password : '',
                    password2: '',
                    enable   : row.enable.toString(),
                    roleId   : row.roleId.toString(),
                };
                this.isShow = true;
            },
            confirm() {
                this.formConfig.loading = true;

                let url = {
                    addAdmin: 'adminAddSave',
                    editAdmin: 'adminEditSave',
                }

                this.$http.post(url[this.typeSave.en], this.operateForm).then(
                    response => {
                        if (response.code === 20000) {
                            this.$message({
                                message: response.message,
                                type: 'success'
                            });
                            this.config.page = 1;
                            this.adminList();
                            this.isShow = false;
                        }
                        this.formConfig.loading = false;
                    }
                );
            },
            delAdmin(row) {
                console.log(row);
                /*this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        let id = row.id
                        this.$http
                            .get('/api/user/del', {
                                params: {
                                    id
                                }
                            })
                            .then(res => {
                                console.log(res.data)
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                })
                                this.getList()
                            })
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })*/
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/common";
</style>